<!DOCTYPE html>
<html>
<head>
    <title>Physics Diagram</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            background-color: #f0f0f0;
        }
        canvas {
            border: 1px solid #ccc;
            background-color: #fff;
        }
    </style>
</head>
<body>
    <canvas id="physicsCanvas" width="500" height="450"></canvas>
    <script>
        const canvas = document.getElementById('physicsCanvas');
        const ctx = canvas.getContext('2d');

        // Style settings
        ctx.strokeStyle = 'black';
        ctx.fillStyle = 'black';
        ctx.lineWidth = 2.5;
        ctx.font = '22px serif';
        ctx.textAlign = 'center';
        ctx.textBaseline = 'middle';

        // Origin point
        const origin = { x: 200, y: 280 };

        // Helper function to draw an arrow
        function drawArrow(fromX, fromY, toX, toY, headLength = 10) {
            const dx = toX - fromX;
            const dy = toY - fromY;
            const angle = Math.atan2(dy, dx);
            ctx.beginPath();
            ctx.moveTo(fromX, fromY);
            ctx.lineTo(toX, toY);
            ctx.lineTo(toX - headLength * Math.cos(angle - Math.PI / 6), toY - headLength * Math.sin(angle - Math.PI / 6));
            ctx.moveTo(toX, toY);
            ctx.lineTo(toX - headLength * Math.cos(angle + Math.PI / 6), toY - headLength * Math.sin(angle + Math.PI / 6));
            ctx.stroke();
        }
        
        // --- Drawing the components ---

        // Axes lengths
        const axisLengthX = 150;
        const axisLengthZ = 180;
        const axisLengthY = 100;
        const yAngle = Math.PI / 4; // 45 degrees for perspective

        // Draw x-axis (up)
        drawArrow(origin.x, origin.y, origin.x, origin.y - axisLengthX);
        ctx.fillText('x', origin.x + 15, origin.y - axisLengthX - 5);

        // Draw z-axis (right)
        drawArrow(origin.x, origin.y, origin.x + axisLengthZ, origin.y);
        ctx.fillText('z', origin.x + axisLengthZ + 15, origin.y);

        // Draw y-axis (down-left)
        const yEndX = origin.x - axisLengthY * Math.cos(yAngle);
        const yEndY = origin.y + axisLengthY * Math.sin(yAngle);
        drawArrow(origin.x, origin.y, yEndX, yEndY);
        ctx.fillText('y', yEndX - 15, yEndY + 5);

        // Point P on x-axis
        const b_dist = 100;
        const p_pos = { x: origin.x, y: origin.y - b_dist };
        ctx.beginPath();
        ctx.arc(p_pos.x, p_pos.y, 4, 0, 2 * Math.PI);
        ctx.fill();
        ctx.fillText('P', p_pos.x - 20, p_pos.y);
        ctx.fillText('b', p_pos.x + 18, origin.y - b_dist / 2);

        // Point Q on z-axis
        const vt_dist = 120;
        const q_pos = { x: origin.x + vt_dist, y: origin.y };
        ctx.beginPath();
        ctx.arc(q_pos.x, q_pos.y, 4, 0, 2 * Math.PI);
        ctx.fill();
        ctx.fillText('Q', q_pos.x, q_pos.y - 20);
        ctx.fillText('vt', origin.x + vt_dist / 2, origin.y + 20);

        // Velocity vector v
        const v_start = { x: origin.x + axisLengthZ + 30, y: origin.y };
        const v_end = { x: v_start.x + 40, y: v_start.y };
        drawArrow(v_start.x, v_start.y, v_end.x, v_end.y);
        ctx.fillText('v', v_end.x + 15, v_end.y);

        // Figure caption
        ctx.font = '20px serif';
        ctx.fillText('Fig. 5.10', canvas.width / 2, 420);

    </script>
</body>
</html>